<template>
	<view class="d-flex a-start">
		<view id="leftColumn" class="column m-right10">
			<Goods :list="leftList" :type="type"></Goods>
		</view>
		<view id="rightColumn" class="column m-left10">
			<Goods :list="rightList" :type="type"></Goods>
		</view>
	</view>
</template>
<script>
	import Goods from './goods.vue'
	export default {
		props: {
			value: { // 瀑布流数据
				type: Array,
				required: true,
				default: () => []
			},
			addTime: { // 每次插入数据的事件间隔，单位ms
				type: [Number, String],
				default: 200
			},
			type: {
				type: String,
				default: 'goods'
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempData: []
			}
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value)
			}
		},
		components: {
			Goods
		},
		watch: {
			copyFlowList(nVal, oVal) {
				// 传入的是完整数据，tempData只负责存新增数据
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
				this.tempData = this.tempData.concat(this.cloneData(nVal.slice(startIndex)))
				this.splitData()
			}
		},
		mounted() {
			this.tempData = this.cloneData(this.copyFlowList)
			this.splitData()
		},
		methods: {
			cloneData(data) {
				return JSON.parse(JSON.stringify(data))
			},
			// https://www.uviewui.com/js/getRect.html
			async splitData() {
				if (!this.tempData.length) return
				let leftRect = await this.$uGetRect('#leftColumn')
				let rightRect = await this.$uGetRect('#rightColumn')
				let item = this.tempData[0]
				if (!item) return
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item)
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item)
				} else { // 高度相同看长度
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item)
					} else {
						this.rightList.push(item)
					}
				}
				this.tempData.splice(0, 1) // push完即删
				if (this.tempData.length) {
					setTimeout(() => {
						this.splitData()
					}, this.addTime)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.column {
		flex: 1;
		display: flex;
		flex-direction: column; 
		height: auto;
	}
</style>
